import Index from "@/views/cssModel/publicMethod/child/roll";
import SingleColumnLayout from "@/views/cssModel/publicMethod/child/SingleColumnLayout";
import TwoColumnAdaptiveLayout from "@/views/cssModel/publicMethod/child/TwoColumnAdaptiveLayout";

export const publicMethodList = [
    {
        name: 'css3无缝轮播',
        component: Index,
        html: `.roll-box {
  width: 100%;
  height: 300px;
  border: 0x solid @primary-color;
  position: relative;
  overflow: hidden;
  .box-warp {
    position: relative ;
    animation: roll 5s infinite linear normal;
    &:hover {
      animation-play-state: paused;
      -webkit-animation-play-state: paused;
    }
    .item {
      height: 50px;
      line-height: 50px;
      &:nth-child(2n+1) {
        background: @primary-color;
      }
    }
  }
}

@keyframes roll {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -260px, 0);
    transform: translate3d(0, -260px, 0);
  }
}
`
    },
    {
        name:'单列布局',
        component:SingleColumnLayout,
        html:`<div className={'layout-box'}>
    <header>header</header>
    <main>main</main>
    <footer>footer</footer>
</div>
        
.layout-box{
  width: 100%;
  height: 100%;
  height: 400px;
  display: flex;
  flex-direction: column;
  background:@header-color ;
  border: 1px solid @header-color;
  box-sizing: border-box;
  header{
    width: 100%;
    height: 100px;
    margin: 0 auto;
    background: @header-color;
    color: @main-color;
  }
  main{
    flex: 1;
    margin: 0 auto;
    width: 100%;
    background: @main-color;
    color: @header-color;

  }
  footer{
    width: 100%;
    background: @footer-color;
    margin: 0 auto;
    height: 50px;
    color: @main-color;
  }
}
`
    },
    {
        name:'两列自适应布局',
        component:TwoColumnAdaptiveLayout,
        html:`.layout-box {
  width: 100%;
  height: 400px;
  display: flex;
  background: @header-color;
  border: 1px solid @header-color;
  box-sizing: border-box;

  aside {
    height: 100%;
    width: 100px;
    color: @main-color;
    background: @header-color;
  }

  main {
    flex: 1;
    height: 100%;
    background: @main-color;
  }
}
`
    }
]
